<template>
    <div id="main" ref="chart"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chart = ref();

onMounted(() => {
    const myChart = echarts.init(chart.value);
    const option = {
        grid: { bottom: '10%' },
        xAxis: [
            {
                type: 'category', // 坐标轴类型为类目型
                data: [
                    'ORE BERTH',
                    'BERTH 1',
                    'BERTH 2',
                    'BERTH 3',
                    'BERTH 4',
                    'BERTH 5',
                    'BERTH 6',
                    'BERTH 7',
                    'BERTH 8',
                    'BERTH 9',
                    'BERTH 10',
                    'BERTH 11',
                ],
                axisTick: {
                    inside: true, //刻度标签是否朝内，默认朝外。
                    customValues: [0, 324, 205, 205, 205, 205, 205, 155, 155, 144, 142, 124, 200],
                },
            },
            {
                type: 'value',
                position: 'bottom', // 很重要，如果没有这个设置，默认第二个x轴就会在图表的顶部
                offset: 90, // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
                // type: 'category', // 坐标轴类型
                axisTick: { show: false }, // 是否显示坐标轴刻度
                axisLine: { show: false }, // 是否显示坐标轴轴线
                data: [
                    '-324',
                    '0',
                    '205',
                    '410',
                    '615',
                    '820',
                    '0',
                    '155',
                    '310',
                    '0',
                    '144',
                    '286',
                    '0',
                    '144',
                    '286',
                    '0',
                    '144',
                    '286',
                ],
            },
        ],
        yAxis: {
            type: 'time', // 坐标轴类型为数值型
            min: `2025-02-28 0:00:00`,
            max: `2025-02-28 23:59:59`,
            show: true,
            axisTick: {
                show: true,
            },
        },
        series: [
            {
                data: [],
                type: 'bar',
            },
        ],
    };
    myChart.setOption(option);
});
</script>
<style lang="less" scoped>
#main {
    height: 500px;
}
</style>
